<template>
    <view class="pt-30">
        <view class="ft-30 t-w pl-30 line-height1">近五个月招录学员情况</view>
        <view class="charts-box w100 pl-30 pr-30">
            <qiun-data-charts
                type="column"
                :opts="opts"
                :chartData="chartData"
                :canvas2d="true"
                canvasId="gsnjeNiGwJdCJjAExEraeXcQPMKFuIrv"
                background="transparent"
                :inScrollView="true"
            />
            <!-- :pageScrollTop="scrollTop" -->
        </view>
    </view>
</template>

<script setup>
/**
 * @description 柱状图统计 官方文档：https://www.ucharts.cn/v2/#/document/index
 * @author yinzhi
 * @date 2025-03-14
 */

import { onLoad } from '@dcloudio/uni-app'
import { ref, computed, defineComponent } from 'vue'
defineComponent({
    name: 'BarChart'
})

const props = defineProps({
    // 如果出现图表不随页面滚动发生位置变化时，可以在qiun-data-charts上设置pageScrollTop
    scrollTop: {
        type: Number,
        default: 0
    }
})

// 图表数据
const chartData = ref({})
// 左侧标签最大值，可根据接口返回的最大值往上浮动，避免柱体上方文字被遮挡问题
const max = ref(51)

const getServerData = () => {
    //模拟从服务器获取数据时的延时
    setTimeout(() => {
        let res = {
            categories: ['1月', '2月', '3月', '4月', '5月'],
            series: [
                {
                    name: '数据1',
                    data: [35, 41, 31, 33, 13]
                },
                {
                    name: '数据2',
                    data: [18, 27, 21, 24, 6]
                }
            ]
        }
        chartData.value = JSON.parse(JSON.stringify(res))
    }, 500)
}

onLoad(() => {
    getServerData()
})

// 饼状图配置
const opts = computed(() => {
    return {
        color: ['#f39423', '#f9c78b'],
        padding: [0, 0, 0, 0],
        background: 'transparent',
        fontColor: '#ffffff',
        touchMoveLimit: 30, //每秒重新渲染的帧数
        xAxis: {
            disableGrid: true,
            scrollShow: true,
            axisLineColor: '#f8f8f8',
            gridColor: '#f8f8f8',
            fontColor: '#ffffff'
        },
        yAxis: {
            gridColor: '#f8f8f8',
            showTitle: true,
            data: [
                {
                    min: 0,
                    max: max.value,
                    tofix: 0.1, //防止有小数
                    axisLineColor: 'transparent', //隐藏左侧y轴线
                    title: '单位(人)',
                    titleOffsetX: 16,
                    titleOffsetY: -6,
                    titleFontSize: 12
                }
            ]
        },
        legend: {
            position: 'top',
            padding: 0,
            margin: 10,
            lineHeight: 20
        },
        extra: {
            column: {
                type: 'group',
                width: 16, //柱子宽度
                categoryGap: 5, //柱子间距
                seriesGap: 0 //多个系列柱子间距
            },
            tooltip: {
                showArrow: false,
                bgOpacity: 0.5,
                fontSize: 12
            }
        }
    }
})
</script>

<style scoped lang="scss">
.charts-box {
    width: 100%;
    height: 270px;
}
</style>
